<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>实名认证</title>
<link th:href="@{/ksdH5/css/public/mui/mui.css}" rel="stylesheet"/>
<script th:src="@{/ksdH5/js/public/mui/mui.min.js}"></script>
<script th:src="@{/ksdH5/js/public/jquery.min.js}"></script>
<script th:src="@{/ksdH5/js/public/public.js}"></script>>
<link th:href="@{/ksdH5/css/realName/realNameWrz.css}" rel="stylesheet"/>
<link th:href="@{/ksdH5/css/realName/realName.css}" rel="stylesheet"/>

</head>
<body>
<!--头部-->
<div class="header">
	<a href="javascript:history.go(-1)" class="header_returnBnt">
		<img  th:src="@{/ksdH5/img/fanhuiBnt.png}" />
	</a>
	<span class="header_title">实名认证</span>
</div>
<div class="mui-content">
<div class="realName_title">请拍摄身份证正反面照片，请务必提供清晰身份证照。</div>
<div class="realName_contBox">
	<div class="realName_contBox_sfzSc">
		<div class="realName_contBox_sfzSc_left">
			<span>
				<input type="file" accept="image/*" id="head_img_change" />
				<img id="idcard_img1"  th:src="@{/ksdH5/img/realName/smrz_sfzZM.png}" />
			</span>
			<p>身份证人像面</p>
		</div>
		<div class="realName_contBox_sfzSc_left realName_contBox_sfzSc_right">
			<span>
				<input type="file" accept="image/*" id="head_img_change1" />
				<img  id="idcard_img2" th:src="@{/ksdH5/img/realName/smrz_sfzBM.png}" />
			</span>
			<p>身份证国徽面</p>
		</div>
	</div>
	<div class="realName_contBox_sfz_title">拍摄身份证要求:</div>
	<div class="realName_contBox_sfz_tishi">
		大陆公民持有的本人有效二代身份证；<br />
		拍摄时确保身份证<span>边框完整，字体清晰，亮度均匀。</span>
	</div>
	<div class="realName_contBox_sfz_tishiImg">
		<img  th:src="@{/ksdH5/img/realName/smrz_tishi.png}" />
	</div>
</div>
<div class="realName_title">请确认以下信息，如若有误请点按上图重新拍摄</div>
<div class="realName_contBox">
	<div class="realName_contBox_inputBox">
		<span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
		<input type="text" id="name_input" />
	</div>
	<div class="realName_contBox_inputBox">
		<span>身份证号：</span>
		<input type="text"  id="idcard_input"/>
	</div>
</div>
<button onclick="submitReal()" class="realName_tijiaoBnt">提交</button>
</div>
<!--弹窗层-->
<div class="BGbox"></div>
<!--认证成功-->
<div class="realName_successful">
	<div class="realNameWrzBox_ImgBox">
		<img class="realNameWrzBox_ImgBox_img"  th:src="@{/ksdH5/img/realName/smrz_rzcg.png}" />
		<a href="javascript:void(0);" class="realNameWrzBox_closeBnt">
			<img  th:src="@{/ksdH5/img/realName/smrzClose.png}" />
		</a>
	</div>
	<div class="realNameWrzBox_title">恭喜你，认证成功</div>
	<div class="realNameWrzBox_tishi">现在就去跟随大牛一起赚钱吧</div>
	<a href="../login.html" class="realNameWrzBox_button">去登录</a>
</div>
<!--认证失败-->
<div class="realName_error">
	<div class="realNameWrzBox_ImgBox">
		<img class="realNameWrzBox_ImgBox_img" th:src="@{/ksdH5/img/realName/smrz_rzsb.png}" />
		<a href="javascript:void(0);" class="realNameWrzBox_closeBnt">
			<img th:src="@{/ksdH5/img/realName/smrzClose.png}" />
		</a>
	</div>
	<div class="realNameWrzBox_title">很遗憾，认证失败</div>
	<div class="realNameWrzBox_tishi">赶紧去检查一下哪里出错了吧</div>
	<button class="realName_error_button">去修改</button>
</div>
</body>


<script type="text/javascript" th:inline="javascript">
//获得项目根路径
var ctx = [[@{/}]];
</script>
<script type="text/javascript">
mui.init({
	swipeBack:true
})
</script>
<script type="text/javascript">
$(document).on('click','.realNameWrzBox_closeBnt',function(){
	$('.BGbox').hide();
	$('.realName_successful').hide();	
	$('.realName_error').hide();	
});
$(document).on('click','.realName_error_button',function(){
	$('.BGbox').hide();
	$('.realName_error').hide();	
});

/*上传图片*/
var num1 =1;//定义正面认证次数
var num2 =1; //定义反面认证次数
$(function(){
	$("#head_img_change").change(function() {
		/* var $file = $(this);
		var fileObj = $file[0];
		var windowURL = window.URL || window.webkitURL;
		var dataURL;
		var $img = $("#headimg");
		if(fileObj && fileObj.files && fileObj.files[0]){
			dataURL = windowURL.createObjectURL(fileObj.files[0]);
			$img.attr('src',dataURL);
		}else{
			dataURL = $file.val();
			var imgObj = document.getElementById("headimg");
			// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性再加入，无效；
			// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
			imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
			imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
		}  */
	    var imageType = "10E"
	    var formData = new FormData();
	    formData.append("file",$('#head_img_change')[0].files[0]);
	    formData.append("imageType", imageType);
	    formData.append("num", num1);
	    formData.append("ocrType", "0");
	    $.ajax({
	        url:ctx+'h5/uploadIdCard',
	        dataType:'json',
	        type:'POST',
	        async: false,
	        data: formData,
	        processData : false, // 使数据不做处理
	        contentType : false, // 不要设置Content-Type请求头
	        success: function(re){
	        	var url = re.obj.path_url;
	            if (re.status == 'SUCCESS') {
	            	var data = re.obj.data;
	           		 var dataJson = JSON.parse(data);
	           		 $("#idcard_img1").attr("src",url);
	           		 $("#name_input").val(dataJson.name);
	           		 $("#idcard_input").val(dataJson.cardNum);
	            } else {
	            	if(re.msg=="404"){
	            		num1 ++;
	            		mui.toast("图片上传不正确请更换图片",{ duration:'long'});
	            	} else if(re.msg=="505"){
	            		num1++;
	            		 $("#idcard_img1").attr("src",url);
	            	}
	            }
	        },
	        error:function(response){
	        }
	    });
		
		
		
	});
	$("#head_img_change1").change(function() {
		  var imageType = "10F"
		    var formData = new FormData();
		    formData.append("file",$('#head_img_change1')[0].files[0]);
		    formData.append("imageType", imageType);
		    formData.append("num", num2);
		    formData.append("ocrType", "1");
		    $.ajax({
		        url:ctx+'h5/uploadIdCard',
		        dataType:'json',
		        type:'POST',
		        async: false,
		        data: formData,
		        processData : false, // 使数据不做处理
		        contentType : false, // 不要设置Content-Type请求头
		        success: function(re){
		            if (re.status == 'SUCCESS') {
		            	var data = re.obj.data;
		           		 var dataJson = JSON.parse(data);
		           		 $("#idcard_img2").attr("src",re.obj.path_url);
		            } else {
		            	$("#idcard_img2").attr("src",re.obj.path_url);
		            }

		        },
		        error:function(response){
		        }
		    });
	});
})

//提交实名认证
function submitReal(){
	var name =  $.trim($("#name_input").val());
	var idcardNo  =  $.trim($("#idcard_input").val());
	var testStr= /^(\d{15}$|^\d{18}$|^\d{17}(\d|X))$/;
	if(!testStr.test(idcardNo)){
		mui.toast("身份证号不正确",{ duration:'long'});
		return;
	}
	$.ajax({
		url :ctx+"h5/submitReal",
		dataType : "json",
		type : "POST",
		data:{
			"name":name,
			"idcard":idcardNo
		},
		success : function(re) {
			if(re.status=="SUCCESS"){
				if (re.status == "out") { //session过期
					//跳转登陆页面
					location.href = prefix + '/login';
				}
				mui.toast(re.msg,{ duration:'long'});
				setTimeout(function (){
					//跳转到登陆页面
					location.href = ctx + 'h5/login';
				}, 3000);
			}else {
				mui.toast(re.msg,{ duration:'long'});
			}
		}
	});
}

</script>
</html>
